<template>
  <div class="basic-box">
    <div class="form-box">
      <a-form :model="data.formState" :label-col="labelCol">
        <a-form-item
          :label="t('模板名称')"
          :rules="[{ required: true, message: t('请填写名称!') }]"
        >
          <a-input v-model:value="data.formState.name" />
        </a-form-item>
        <a-form-item
          :label="t('模板编号')"
          :rules="[{ required: true, message: t('请填写编号!') }]"
        >
          <a-input v-model:value="data.formState.code" />
        </a-form-item>
        <a-form-item label="模板类别" :rules="[{ required: true, message: '请填写模板类别!' }]">
          <a-select
            v-model:value="data.formState.category"
            :placeholder="t('请选择模板类别')"
            style="width: 100%"
          >
            <a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="API" :rules="[{ required: true, message: '请填写API!' }]">
          <SelectApiConfig v-model="data.apiConfig" :exampleStr="exampleStr">
            <InputModel
              :value="data.apiConfig.name"
              :placeholder="t('配置API')"
              style="width: 100%; min-width: 100px"
            />
          </SelectApiConfig>
        </a-form-item>
        <a-form-item :label="t('菜单')">
          <a-switch v-model:checked="data.formState.isMenu" :checkedValue="1" :unCheckedValue="0" />
        </a-form-item>
        <a-form-item :label="t('图标')" v-if="data.formState.isMenu">
          <IconPicker v-model:value="data.formState.icon" />
        </a-form-item>
        <a-form-item :label="t('上级')" v-if="data.formState.isMenu">
          <MenuSelect
            :value="data.formState.parentId"
            @change="
              (val) => {
                data.formState.parentId = val;
              }
            "
          />
        </a-form-item>
        <a-form-item :label="t('排序')">
          <a-input-number v-model:value="data.formState.sortCode" style="width: 100%" />
        </a-form-item>
        <a-form-item :label="t('描述')">
          <a-textarea v-model:value="data.formState.remark" :rows="8" />
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { IconPicker } from '/@/components/Icon';
  import { MenuSelect } from '/@/components/MenuSelect';
  import { message } from 'ant-design-vue';
  import { PrintBasicData } from '/@/model/generator/print';
  import { SelectApiConfig, InputModel } from '/@/components/ApiConfig';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { TreeItem } from '/@/components/Tree';
  import { getDicDetailList } from '/@/api/system/dic';
  import { PrintCategory } from '/@/enums/printEnum';
  import { ApiConfig } from '/@/components/ApiConfig/src/interface';
  const labelCol = { style: { width: '80px' } };
  const { t } = useI18n();
  const exampleStr = `{
    code: 0,
    msg: 'success',
    data: {
      title:'title',
      table:[]
    },
  }`;
  const props = withDefaults(
    defineProps<{
      basicData: PrintBasicData;
      apiConfig: ApiConfig;
    }>(),
    {
      basicData: () => {
        return {
          code: '',
          name: '',
          icon: '',
          category: '',
          parentId: '',
          sortCode: 0,
          isMenu: 0,
          remark: '',
          apiConfig: '',
          content: '',
        };
      },
    },
  );
  const data: {
    formState: PrintBasicData;
    apiConfig: ApiConfig;
  } = reactive({
    formState: {
      code: '',
      name: '',
      icon: '',
      category: '',
      parentId: '',
      sortCode: 0,
      isMenu: 0,
      remark: '',
      apiConfig: '',
      content: '',
    },
    apiConfig: {
      id: '',
      name: '',
      method: '',
      requestParamsConfigs: [], //Query Params
      requestHeaderConfigs: [], //Header
      requestBodyConfigs: [], //Body
    },
  });
  // 模板类别
  const categoryOptions = ref<TreeItem[]>([]);
  getCategoryList();
  async function getCategoryList() {
    categoryOptions.value = (await getDicDetailList({
      itemId: PrintCategory.ID,
    })) as unknown as TreeItem[];
  }
  onMounted(() => {
    data.formState = props.basicData;
    data.apiConfig = props.apiConfig;
  });
  async function validateForm() {
    if (data.formState.code == '') {
      message.error(t('请填写编号'));
      return false;
    }
    if (data.formState.name == '') {
      message.error(t('请填写名称'));
      return false;
    }
    if (data.formState.isMenu && data.formState.icon == '') {
      message.error(t('请选择图标'));
      return false;
    }
    if (data.apiConfig && data.apiConfig.id == '') {
      message.error('请选择API');
      return false;
    }
    return true;
  }
  function getBasicData() {
    return data.formState;
  }
  function getApiData() {
    return data.apiConfig;
  }
  defineExpose({
    validateForm,
    getBasicData,
    getApiData,
  });
</script>

<style lang="less" scoped>
  .basic-box {
    height: 100%;
    padding: 24px;
  }

  .form-box {
    width: 100%;
    max-width: 794px;
    height: calc(100vh - 114px);
    overflow: hidden auto;
    background-color: #fff;
    border-radius: 4px;
    margin: auto;
    padding: 24px;
  }

  html[data-theme='dark'] {
    .basic-box {
      background-color: #000;
    }

    .form-box {
      background-color: #151515;
    }
  }
</style>
